import { defineComponent, ref, computed } from "vue";
export default defineComponent({
  proprs: ['msg'],
  name: 'studemo6',
  setup() {
    //响应式数据
    const message = ref('组合式API-自定义渲染-JSX');
    const inputValue = ref('11111');
    //计算属性
    const computedMessage = computed(() => {
      return `${message.value}(conputed)`
    })
    //方法：改变message数据
    const changeMessage = () => {
      message.value = '改变组合式API-自定义渲染-JSX'
    }
    //JSX渲染
    return () => (
      <div id='wrap'>
        <h1>{message.value}</h1>
        <p>{computedMessage.value}</p>
        <button onClick={changeMessage}>点击改变文字</button>
        <input type="text" v-model={inputValue.value} />
        <p>Input Value:{inputValue.value}</p>
      </div>
    )
  }
})


